<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
      <template #default="{ filterForm }">
        <el-col :span="8">
          <el-form-item label="报警时间">
            <el-date-picker
              v-model="filterForm.time"
              type="datetimerange"
              range-separator="-"
              style="width: 100%"
              @change="operationTimeChange"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </template>
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col> -->

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
      :useAction="true"
    >
      <template #actionButton="{ row }">
        <el-button type="text" icon="Edit" @click="handleEdit(row)"
          >查看</el-button
        >
      </template>
      <template #title="{ row }"> {{ getTitle(row) }}</template>
    </Table>
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      :slots="['details', 'spList']"
      :showButton="false"
      title="详情"
      :showPdf="true"
    >
      <template #details>
        <el-table
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '0' }"
          :header-row-style="{ height: '0' }"
          :data="details"
          border
          style="width: 100%"
        >
          <template v-if="approveType == '1'">
            <el-table-column prop="deviceName" label="切除罐号">
            </el-table-column>
            <el-table-column
              prop="qcyy"
              :show-overflow-tooltip="false"
              label="切除原因"
            >
            </el-table-column>
            <el-table-column
              prop="qxfx"
              :show-overflow-tooltip="false"
              label="切除风险"
            >
            </el-table-column>
            <el-table-column
              prop="gkcs"
              :show-overflow-tooltip="false"
              label="管控措施"
            >
            </el-table-column>
            <el-table-column
              prop="dqyw"
              :show-overflow-tooltip="false"
              label="当前液位"
            >
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column prop="deviceName" label="切除罐号">
            </el-table-column>
            <el-table-column prop="qcyy" label="切除原因"> </el-table-column>
          </template>
        </el-table>
      </template>
      <template #spList>
        <el-table
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '0' }"
          :header-row-style="{ height: '0' }"
          :data="sisPhases"
          border
          style="width: 100%"
        >
          <el-table-column prop="userName" label="审批人"> </el-table-column>
          <el-table-column prop="phase" label="审批时间">
            <template #default="{ row }">
              <span v-if="row.signUrl">{{ row.updateTime }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="审批状态"> </el-table-column>

          <el-table-column prop="signUrl" label="签字">
            <template #default="{ row }">
              <img height="80" :src="formatSrc(row.signUrl)" alt="" />
            </template>
          </el-table-column>
        </el-table>
      </template>
    </DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/system/sis-config.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
const formatSrc = (url) => {
  if (url) {
    return `/dev-api/file/download?url=${url}`;
  }
};
const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["state", "createUserName", "personCharge", "deviceName"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const details = ref([]);
const sisPhases = ref([]);
const approveType = ref("");
// 补充修改.新增事件
const plugEdit = (row) => {
  details.value = JSON.parse(row.detaileds);
  sisPhases.value = row.sisPhases;
  approveType.value = row.approveType;
  console.log(details, sisPhases);
  return {
    ...row,
    title: getTitle(row),
  };
};
const { fetchData, getList, queryParams, handleEdit } = useAsyncData({
  APIS: {
    query: APIS.queryQd,
  },
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  filterForm: {
    state: "已通过",
  },
});
const operationTimeChange = (data) => {
  if (data && data.length) {
    queryParams.value.startTime = data[0];
    queryParams.value.endTime = data[1];
  } else {
    queryParams.value.startTime = null;
    queryParams.value.endTime = null;
  }
};
const getTitle = (row) => {
  let text = row.approveType == "1" ? "切除" : "恢复";
  return `SIS系统联锁${text}审批`;
};
</script>

<style lang="scss" scoped></style>
